<template>
  <view class="container-list">
    <!--pages/selectDevice/startpage.wxml-->

    <view class="page-list-header">
      <h2>选择设备</h2>
    </view>
    <view class="page-list">
      <view
        v-for="(device, index) in deviceList"
        :key="index"
        class="select-device-block"
      >
        <view class="cnt">
          <view class="device-icon">
            <image :src="device.imageUrl"></image>
          </view>
          <view class="describle">
            <view
              ><text class="name">{{ device.name }}</text></view
            >
            <view class="type">{{
              device.bleNamePrefix
            }}</view>
          </view>
        </view>
        <view
          class="fr"
          style="margin-right: 20rpx"
          :data-perfix="device.bleNamePrefix"
          :data-dvt="device.productCode"
          :data-bind="device.isBind"
          @tap="goToBindingOrConnect"
        >
          <text :style="'color: ' + (device.isBind ? '#67c23a' : '#333')">{{
            device.isBind ? "已绑定" : "去绑定"
          }}</text>
          <icon
            class="ico-arrow-right"
            style="position: relative; top: 4rpx"
          ></icon>
        </view>
      </view>
    </view>
    <view v-show="isToLink" class="btn-box">
      <button @tap="toLink" style="color: #f00">去连接</button>
    </view>
  </view>
</template>

<script>
var app = getApp();
var utils = require("../../utils/util.js");
import _device from './device'
import _link from './ble2link'
export default {
  data() {
    return {
      isToLink: false,
      deviceList: [
        
      ],
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    utils.intiFindIndex();
    _device.map((v)=>{
      v.isBind = false
      v.link = _link[v.dataProtocolCode]
      return v
    })
    this.deviceList = _device
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var bindDeviceList = app.globalData.bindDeviceList;
    if (bindDeviceList.length) {
      this.isToLink = true;
    }
    var deviceActionList = JSON.parse(JSON.stringify(this.deviceList));
    console.log('111', this.deviceList, bindDeviceList)
    for (let i = 0; i < deviceActionList.length; i++) {
      for (let j = 0; j < bindDeviceList.length; j++) {
        if (
          bindDeviceList[j].productCode ===
          deviceActionList[i].productCode
        ) {
          deviceActionList[i].isBind = true;
          deviceActionList[i].deviceUUId = bindDeviceList[j].deviceUUId;
        }
      }
    }
    this.setData({
      deviceList: deviceActionList,
    });
    uni.openBluetoothAdapter({
      success() {
        console.log('初始化蓝牙')
      },
      fail(err) {
        console.log('openBluetoothAdapter', err)
        uni.showModal({
          title: "提示",
          content: "蓝牙开关未开启",
          showCancel: false,
        });
      }
    });
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},
  methods: {
    toLink() {
      let item = this.deviceList.filter((v) => v.isBind)[0];
      console.log(item);
      uni.reLaunch({
        url: item.link,
        query: item
      });
    },
    goToBindingOrConnect(e) {
      if (e.currentTarget.dataset.bind) {
        uni.reLaunch({
          url: "/pages/connectDetail/v2_deviceDetail",
        });
      } else {
        // 绑定流程
        uni.reLaunch({
          url: `../scanDevices/v2_scanDevices?deviceType=${e.currentTarget.dataset.dvt}&perfix=${e.currentTarget.dataset.perfix}`,
        });
      }
    },
  },
};
</script>
<style>
.container-list {
  padding-bottom: 100px;
}
.btn-box {
  position: fixed;
  bottom: 20px;
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
}
.select-device-block {
  margin: 16rpx;
  background-color: #fff;
  border-radius: 10rpx;
  height: 140rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.select-device-block > view.cnt {
  display: flex;
}

.select-device-block .device-icon {
  position: relative;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
}

.select-device-block .device-icon image {
  width: 100rpx;
  height: 100rpx;
  overflow: hidden;
}

.describle .type {
  color: #999;
  font-size: 28rpx;
}

.icon-block {
  height: 96rpx;
  line-height: 96rpx;
  position: absolute;
  top: 0;
  right: 20rpx;
}
</style>
